<template>
  <div class="home">
    <div class="homeTop">
      <li>
        <homeTopLeft :historyData1="set_tableData1" :historyData2="set_tableData2"/>
      </li>
      <li>
        <homeTopCenter :todayDataTotal="set_todayData" />
      </li>
      <li>
        <homeTopRight :historyData3="set_tableData3" :pieData="set_pieData"/>
      </li>
    </div>
    <div class="homeButtom">
      <li>
        <homeBottomLeft :monthData="set_monthData" />
      </li>
      <li>
        <homeBottomRight :historyData4="set_tableData4"/>
      </li>
    </div>
  </div>
</template>

<script>
import homeTopLeft from '@/views/home/homeTopLeft'
import homeTopCenter from '@/views/home/homeTopCenter'
import homeTopRight from '@/views/home/homeTopRight'
import homeBottomLeft from '@/views/home/homeBottomLeft'
import homeBottomRight from '@/views/home/homeBottomRight'
import { searchHomeData } from '@/api/home'
export default {
  components: { homeTopLeft, homeTopCenter, homeTopRight, homeBottomLeft, homeBottomRight },
  data() {
    return {
      timer: null,
      set_todayData:{
        toDayTotal: null,
        warningData: null
      },
      set_monthData: null,
      set_tableData1: null,
      set_tableData2: null,
      set_tableData3: null,
      set_tableData4: null,
      set_pieData: null
    }
  },
  methods:{
    //首页查询
    searchData(){
      // {
      // "sign":"0af88d951bb1699ccf65e46ad1f4b8f1",
      // "userId":"38f7cc27912011eb893c00163e100c3c",
      // "status":0,
      // "accountType":0,
      // "province":1,
      // "city":111,
      // "county":1111
      // }
      let _searchs = {
        userId: this.$store.state.user.id,
        status: this.$store.state.user.userInfo.status,
        accountType: this.$store.state.user.accountType,
        province: this.$store.state.user.userInfo.province,
        city: this.$store.state.user.userInfo.city,
        county: this.$store.state.user.userInfo.county,
      };
      //回调接口
      searchHomeData(_searchs).then((res)=>{
        console.log("首页数据:", res.data);
        if (res.statusCode == 200){
          this.set_todayData.toDayTotal = res.data.toDayTotal;
          this.set_todayData.warningData = res.data.warningDataTotal;
          this.set_pieData = res.data.warningDataLvTotal;
          this.set_monthData = res.data.monthDataTotal;
          this.set_tableData1 = res.data.warningDatas;
          this.set_tableData2 = res.data.newInspections;
          this.set_tableData3 = res.data.newInstalls;
          this.set_tableData4 = res.data.realTimeDatas;
        }
      })
    }
  },
  created(){
    this.searchData(); //首页查询
  },
  mounted(){
    //每30s刷新一次首页接口
    this.timer = setInterval(()=> {
      // clearInterval(this.timer);
      this.searchData(); //首页查询
    },10000)
  },
  destroyed(){
    // 销毁 panZoomTiger 实例
    this.$destroy();
    this.set_todayData = {};
    this.set_monthData = null;
    this.set_tableData1 = null;
    this.set_tableData4 = null;
    clearInterval(this.timer); //页面销毁 清除定时器
  }
}
</script>

<style scoped>
  .home{
    padding-top: 10px;
    height: 100%;
    width: 100%;
    background: url("../../assets/img/homeBackground.png") no-repeat;
    /* background: url("../../assets/img/global.gif") no-repeat center center; */
    background-size: 100% 100%;
  }
  .homeTop,.homeButtom{
    width: 100%;
    display: flex;
    padding: 20px 0 20px 20px;
  }
  .homeTop li{
    list-style-type:none;
    width: 33.333%;
    height: 606px;
    color: #fff;
    margin-right: 15px;
  }
  .homeButtom{
    padding-top: 0px;
  }
  .homeButtom li:nth-child(1){
    list-style-type:none;
    width: 50%;
    height: 338px;
    background: url("../../assets/img/home-left-03.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    margin-right: 33px;
  }
  .homeButtom li:last-child{
    list-style-type:none;
    width: 50%;
    height: 338px;
    background: url("../../assets/img/home-right-03.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    margin-right: 10px;
  }
</style>
